[CSS] position sticky를 사용 할 때 top이 아닌 bottom, 아래에 위치하는 방법

CSS의 스타일 속성 position 값 중에는 sticky 값을 선택할 수 있습니다. sticky를 사용하면 항상 화면에 고정되어 보여줄 수 있으면서도 동시에 다른 요소들에 영향을 받는 fixed, relative 두 개의 효과를 모두 가질 수 있죠.

이런 특징 때문에 별도의 콘텐츠 영역, 사이드바 영역에 많이 사용됩니다. 이 때 만약 sticky 요소를 페이지 상단이 아닌 하단에 보이도록 하려면 어떻게 할까요?

Sticky 요소를 하단에 보이게 하는 방법!

! css position sticky를 하단에 고정하기, bottom

일반적으로 상단 위치에 sticky를 많이 사용하나 하단에 고정하는 것도 가능합니다. 이 방법 역시 매우 간단하며 아래의 두 가지만 수행하면 됩니다.

1. css 속성 top을 bottom으로 변경할 것
2. sticky 요소의 크기를 고정된 값을 가지게 할 것

1번부터 간단하게 설명하면 sticky는 반드시 top 또는 bottom 등의 값을 가져야 하는데 이때 top을 bottom으로 변경하면 위쪽이 아닌 아래쪽에 엘리먼트가 고정되어 나타나게 됩니다.

2번은 sticky가 가진 요소가 100% 등 전체 고정되지 않은 값을 가질 경우 문제가 정상 동작하지 않을 수 있습니다. 만약 부모 요소가 flex로 설정된 경우에 좌, 우 요소 중 하나가 sticky라면 반드시 부모 요소에 align-items: flex-end; 값을 사용해 영역 전체를 사용하지 않도록 하는 등 방법이 필요하죠. 예를들어 아래와 같이 코드를 추가해야 합니다.

@ sticky.css

위 예제에서 flex를 사용한 이유는 최근에는 flex를 사용하여 컬럼 형태로 레이아웃을 많이 구현하고 컬럼 중에 하나를 sticky로 설정하는 경우가 많기 때문입니다.

여기까지 sticky 요소의 고정 위치를 하단으로 이동하는 방법에 대하여 간략히 알아봤습니다.